<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <!-- 2. 准备根容器 -->
    <div id="root"></div>

    <!-- <ul>
      <li><a href="https://www.atguigu.com">尚硅谷</a></li>
      <li><a href="https://www.atguigu.com">尚硅谷</a></li>
      <li><a href="https://www.atguigu.com">尚硅谷</a></li>
    </ul> -->

    <!-- 1. 引入js -->
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>

    <script>
      // 3. 创建 React 元素
      const imgElement = React.createElement("img", {
        src: "http://www.atguigu.com/images/index_banner/jichuban.jpg",
      });

      const aElement = React.createElement(
        "a",
        // 特殊属性：className 其实就是 class 属性，但是 class 是关键字，不建议在 js 中使用
        // Warning: Invalid DOM property `class`. Did you mean `className`?
        // { href: "https://www.atguigu.com", class: "link" },
        { href: "https://www.atguigu.com", className: "link" },
        "尚硅谷"
      );

      const liElement = React.createElement("li", null, aElement);

      const element = React.createElement(
        "ul",
        null,
        liElement,
        liElement,
        liElement,
        imgElement
      );

      console.log(element);

      /*
        React.createElement(type, props, ...children) 用来创建 React 元素
          type 元素类型，值是字符串
          props 元素属性，值是对象（如果没有属性，可以写作null）
          ...children 元素内容（子元素，可以有0个或多个）
      */

      // 4. 渲染 React 元素
      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
